<template>
	<div>
		<div class="head">
			<router-link class="operating" tag="span" to="/Login">{{$t('FindPwd.v1')}}</router-link>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div class="title-hd">{{$t('FindPwd.v2')}}</div>
				<div class="main">
					<van-cell-group>
						<van-field v-model.trim="Account" maxlength="20" :placeholder="$t('FindPwd.v3')" clearable :disabled="isOk"/>
					</van-cell-group>
					<van-cell-group>
						<van-field v-model.trim="Pwd" type="password" :placeholder="$t('FindPwd.v4')" maxlength="20" clearable />
					</van-cell-group>
					<van-cell-group>
						<van-field v-model.trim="Pwd2" type="password" :placeholder="$t('FindPwd.v5')" maxlength="20" clearable />
					</van-cell-group>
				</div>
				<div class="btn">
					<van-button slot="button" size="normal" type="info" :loading="loading" @click.native="Find">{{$t('FindPwd.v6')}}</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { base } from './../utils/api';
	import { debounce } from './../utils/debounce'; // 函数节流-高频操作需要
	import { base64 } from 'vux';
	import { Dialog } from 'vant';
	export default {
		name: 'FindPwd',
		data() {
			return {
				subDisabled: false,
				Account: '', // 账号
				Pwd: '', // 密码
				Pwd2: '', // 确认密码
				agreeId: 0,
				loading: false,
				k: '', //凭证K值
				v: '', //凭证V值
				list: [],
				listArray: [],
				listString: '',
				oc: '',
				message: 0,
				listArr: [],
				show: false,
				indexType: true,
				isOk: false
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {
			this.$watch('Account', debounce((val) => { // 这里的 val 是输入的值
				if(this.$route.query.code){
					this.$route.query.code = 0;
				}else{
					if(val) { // 如果存在才执行
						this.getUserName(val);
					}
				}
			}, 200));
		},
		mounted() {
			if(sessionStorage.getItem("listString")){
				this.listString = sessionStorage.getItem("listString");
			}
			if(sessionStorage.getItem("list")){
				sessionStorage.removeItem("list");
			}
			if(this.$route.query.code){
				this.Account = base64.decode(this.$route.query.code);
			}
		},
		methods: {
			getUserName(val) { // 助记词查询
				base.getUserNameZJC({
					'userName': val,
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data;
						if(this.list) {
							this.isOk = true;
							this.Account = val;
							Dialog.confirm({
							  title: _this.$t('FindPwd.v7'),
							  message: _this.$t('FindPwd.v8') +'【'+ val +'】',
							  cancelButtonColor: 'white',
							  cancelButtonText: _this.$t('FindPwd.v9'),
							  confirmButtonText: _this.$t('FindPwd.v6')
							}).then(() => {
							  	this.$router.push({
									path: '/FindPwdAux',
									query: {
										code: base64.encode(this.Account),
										list: sessionStorage.setItem("list",JSON.stringify(this.list))
									}
								})
							}).catch(() => {
							  // on cancel
							  this.isOk = false;
							});
						}
					}
				})
			},
			Find() {
				if(this.Account == '') {
					this.$toast(this.$t('FindPwd.v10'));
					return false;
				} else {
					if(this.Account.length < 4 || this.Account.length > 20) {
						this.$toast(this.$t('FindPwd.v11'));
						return false;
					}
				}
				if(this.Pwd == '') {
					this.$toast(this.$t('FindPwd.v12'));
					return false;
				} else {
					if(this.Pwd.length < 6 || this.Pwd.length > 20) {
						this.$toast(this.$t('FindPwd.v13'));
						return false;
					}
				}
				if(this.Pwd != this.Pwd2) {
					this.$toast(this.$t('FindPwd.v14'));
					return false;
				}
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						base.getForgetPwd({
							'userName': this.Account,
							'auxiliaries': this.listString,
							'encryptedData': this.rsaEncrypt(this.Pwd + ',' + this.Pwd2 + ',' + this.v),
							'key': this.k
						}).then(res => {
							if(res.code == 200) {
								setTimeout(() => {
									this.$router.push('/Login');
								}, 1000);
							}
							this.$toast(res.msg);
							this.loading = false;
						})
					}
				})
			}
		},
		watch: { // 这里的验证请勿注释（如果要设置IOS不能输入中文，请更改type的值为email，安卓的话就需要下面的这些限制）
			Pwd: function() {
				this.Pwd = this.Pwd.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			Pwd2: function() {
				this.Pwd2 = this.Pwd2.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			Account: function() {
				this.Account = this.Account.replace(/[\u4e00-\u9fa5]/ig, ''); // 帐号不能输入中文
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.title {
		font-size: 15px;
		padding: 10px;
		text-align: right;
	}

	.title-hd {
		font-size: 20px;
		font-weight: bold;
		padding: 20px;
	}

	.weui-cells:after {
		left: 15px;
		right: 15px;
	}

	.weui-cells .weui-cell {
		padding: 15px 0;
	}

	.main {
		margin: 0 20px;
		overflow: hidden;
	}

	.btn {
		padding: 20px;
	}

	.text {
		color: #636363;
		padding: 20px;
		text-align: center;
		font-size: 13px;
	}

	.logo {
		width: 30%;
		display: block;
		margin: 10px auto;
	}

	.qr {
		position: absolute;
		right: 0;
		top: 0;
		img {
			width: 26px;
			padding: 12px;
		}
	}

	.Protocol {
		padding: 10px 20px;
		font-size: 12px;
		min-height: 24px;
		span {
			text-decoration: underline;
			color: #3673f7;
		}
	}

	/deep/ .weui-icon-circle {
		font-size: 17px;
	}

	/deep/ .weui-icon-success {
		font-size: 17px;
	}

	/deep/ .vux-check-icon>.weui-icon-success:before,
	.vux-check-icon>.weui-icon-success-circle:before {
		color: #5571f8;
	}

	/deep/ .weui-btn_plain-primary {
		color: #5571f8;
		border-color: #5571f8;
	}

	/deep/ .weui-btn_mini {
		font-size: 12px !important;
	}

	// 用户协议
	.checkPopup {
		font-size: 14px;
		h2 {
			text-align: center;
			padding: 10px 0;
		}
		.checkContent {
			padding: 0 10px 10px;
		}
	}

	input {
		padding: 15px 10px;
	}

	.head~.overlay {
		top: 45px;
	}

	.text {
		padding: 20px;
		text-align: center;
		font-size: 13px;
		color: #FFFFFF;
	}

	.logo {
		width: 30%;
		display: block;
		margin: 5% auto 5%;
	}

	.title-hd {
		font-size: 20px;
		font-weight: bold;
		padding: 5px 20px 20px;
	}

	/deep/.vux-x-input.disabled .weui-input {
		text-fill-color: #fff !important;
		-webkit-text-fill-color: #fff !important;
	}

	/deep/ .van-grid-item__content {
		background: #2c3145;
		padding: 15px 15px 5px 0px;
	}

	/deep/ .van-hairline--top::after {
		border: 0;
	}

	/deep/ .van-grid-item__content::after {
		border: 0;
	}

	/deep/ .van-grid-item__content {
		float: left;
	}

	.red {
		border: 1px solid #3fb776!important;
		background: #3fb776!important;
	}

	.yellow {
		border: 1px solid rgb(93,107,151)!important;
		background: rgb(93,107,151)!important;
	}

	.two[class*=van-hairline]::after {
		border: 0;
	}
</style>
